<template>
  <div class="m-formb1">
    <div class="box">
      <div class="m-tableb1 nobd">
        <a-table
          bordered
          :dataSource="dataSource"
          :columns="columns"
          :pagination="false"
          :row-class-name="
            (_record, index) => (index % 2 === 1 ? 'table-striped' : null)
          "
          :scroll="{ y: 560 }"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'name'">
              <a-input v-model:value="record.name" placeholder="请输入" />
            </template>
            <template v-else-if="column.dataIndex === 'id'">
              <a-input v-model:value="record.id" placeholder="请输入" />
            </template>
            <template v-else-if="column.dataIndex === 'tel'">
              <a-input v-model:value="record.tel" placeholder="请输入" />
            </template>
            <template v-else-if="column.dataIndex === 'status'">
              <a-select
                v-model:value="record.status" placeholder="请选择"
                @change="(value, option) => handleChange(value, option, record)"
              >
                <a-select-option value="失效">失效</a-select-option>
                <a-select-option value="生效">生效</a-select-option>
              </a-select>
            </template>
            <template v-else-if="column.dataIndex === 'role'">
              <a-select
                v-model:value="record.role" placeholder="请选择"
                @change="
                  (value, option) => handleChangeRole(value, option, record)
                "
              >
                <a-select-option value="管理员">管理员</a-select-option>
                <a-select-option value="普通用户">普通用户</a-select-option>
              </a-select>
            </template>
            <template v-else-if="column.dataIndex === 'password'">
              <a-input-password
                v-model:value="record.password"
                placeholder="请输入"
              />
            </template>
            <template v-else-if="column.dataIndex === 'action'">
              <div class="actions">
                <a @click="delRow(record)">删除</a>
              </div>
            </template>
          </template>
        </a-table>
        <div class="g-add-btn" @click="handleAdd"><span>+</span>新建</div>
      </div>
    </div>
    <div class="bot">
      <div class="btns">
        <div class="btn">取消</div>
        <div class="btn btn1">确定</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import { message } from 'ant-design-vue';

function getImageUrl (name) {
  return new URL(`../assets/images/${name}`, import.meta.url).href;
}


const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    width: 180
  },
  {
    title: '账号',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '手机号',
    dataIndex: 'tel',
    key: 'tel',
  }, {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
  }, {
    title: '角色',
    dataIndex: 'role',
    key: 'role',
  }, {
    title: '密码',
    dataIndex: 'password',
    key: 'password',
  }, {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    width: 140
  }
];

const dataSource = ref([
  {
    key: '1',
    name: '胡彦斌',
    id: 'ZWEJ1000120',
    tel: '130123456478',
    status: '生效',
    password: '123456',
    role: '管理员'
  },
  {
    key: '2',
    name: '胡彦斌',
    id: 'ZWEJ1000120',
    tel: '130123456478',
    status: '生效',
    password: '123456',
    role: '管理员'
  },
  {
    key: '3',
    name: '胡彦斌',
    id: 'ZWEJ1000120',
    tel: '130123456478',
    status: '生效',
    password: '123456',
    role: '管理员'
  },
  {
    key: '4',
    name: '胡彦斌',
    id: 'ZWEJ1000120',
    tel: '130123456478',
    status: '生效',
    password: '123456',
    role: '管理员'
  },
  {
    key: '5',
    name: '胡彦斌',
    id: 'ZWEJ1000120',
    tel: '130123456478',
    status: '生效',
    password: '123456',
    role: '管理员'
  },
  {
    key: '6',
    name: '胡彦斌',
    id: 'ZWEJ1000120',
    tel: '130123456478',
    status: '生效',
    password: '123456',
    role: '管理员'
  },
  {
    key: '7',
    name: '胡彦斌',
    id: 'ZWEJ1000120',
    tel: '130123456478',
    status: '生效',
    password: '123456',
    role: '管理员'
  },
  {
    key: '8',
    name: '胡彦斌',
    id: 'ZWEJ1000120',
    tel: '130123456478',
    status: '生效',
    password: '123456',
    role: '管理员'
  }
])

function handleChange (value, option, record) {
  console.log(value, record);
}

function handleChangeRole (value, option, record) {
  console.log(value, record);
}
// 删除
function delRow (record) {
  const index = dataSource.value.indexOf(record);
  dataSource.value.splice(index, 1);
}
// 新增
function handleAdd (param) {
  dataSource.value.unshift(
    {
      key: dataSource.value.length + 1,
      name: null,
      id: null,
      tel: null,
      status: null,
      password: null,
      role: null
    }
  )
}

</script>

<style>
</style>